<template>
<div class="container sendred">
     <img src='/static/images/tuoyuan.png' class='tuoyuan'  mode="aspectFill"/>
     <div class="sendredCard">
        <classTit title="发红包"></classTit>
        <textarea class="weui-textarea" name="title"  placeholder="写下标题.." v-model="cate.desc" />
        <div class='images' >
           <div class='imageItem' v-for="(item,index) in upimgs" :key="index">
              <img class='thumb' :src='ylink+item' mode="aspectFill"/>
              <img class='close' src='/static/images/close.png' @click='delImg'/>
           </div>
        </div> 
        <div class='answeroperate'>
            <img src='/static/images/thumb.png' @click='chooseImage'/>
        </div> 
     </div>
     <div class="adsCard">  
         <div class="weui-cell">广告图 <span>（3:1）</span></div>
         <div class="weui-cell">
             <img :src="ylink+ab_images" alt="atrpic" class="ads" mode="aspectFill" @click="uploadAds" v-if="ab_images"/>
             <img src="/static/images/btn_add_photo_21@2x.png" alt="atrpic" class="ads" mode="aspectFill" @click="uploadAds" v-else/>
         </div>
         <div class="weui-cell">
             <div class="weui-cell__hd">红包金额</div>
             <div class="weui-cell__bd"><input type="digit" placeholder="请输入红包金额" v-model="cate.money"></div>
             <div class="weui-cell__ft">元</div>
         </div>
         <div class="weui-cell">
             <div class="weui-cell__hd">红包数量</div>
             <div class="weui-cell__bd"><input type="number" placeholder="请输入红包数量" v-model="cate.nums"></div>
             <div class="weui-cell__ft">个</div>
         </div>
         <div class="weui-cell">
            <van-radio-group :value="resbag_type" @change="seltype">
               <van-col span="6" v-for="item in hongbTYpe" :key="item"><div class="weui-cell__bd"><van-radio :name="item.name">{{item.value}}</van-radio></div></van-col>
            </van-radio-group>
         </div>
         <div class="weui-cell ">
             <div class="weui-cell__hd">选择红包发放范围</div>
         </div>
         <div class="weui-cell">
            <van-radio-group :value="distance" @change="onChange">
                <van-col span="6" v-for="item in items" :key="item">
                    <div class="weui-cell__bd"><van-radio :name="item.name">{{item.value}}</van-radio></div>
                </van-col>
            </van-radio-group>
         </div>
         <div class="weui-cell weui-cell_access" @click="openMap">
             <div class="weui-cell__hd">选择位置</div>
             <div class="weui-cell__bd"><input type="text" readonly placeholder="选择红包发放位置" disabled :value="mobileLocation.name"></div>
             <view class='weui-cell__ft weui-cell__ft_in-access'></view>
         </div>
     </div>
     <div class="selCard">
        <classTit title="发红包" ></classTit>
        <div class="weui-cell weui-cell_access" @click="selAge">
             <div class="weui-cell__hd">年龄状况</div>
             <div class="weui-cell__bd"><input type="text" readonly placeholder="请选择年龄" disabled :value="ageSed"></div>
             <view class='weui-cell__ft weui-cell__ft_in-access'></view>
         </div>
         <div class="weui-cell weui-cell_access">
             <div class="weui-cell__hd">性别选择</div>
         </div>
         <div class="weui-cell">
            <van-radio-group :value="sexNum" @change="selgraden">
               <van-col span="6" v-for="item in xingbie" :key="item"><div class="weui-cell__bd"><van-radio :name="item.name">{{item.value}}</van-radio></div></van-col>
            </van-radio-group>
         </div>
         <div class="weui-cell weui-cell_access" @click="selLev">
             <div class="weui-cell__hd">年级选择</div>
             <div class="weui-cell__bd"><input type="text" readonly placeholder="请选择年级" disabled :value="levsed"></div>
             <view class='weui-cell__ft weui-cell__ft_in-access'></view>
         </div>
         <div class="weui-cell weui-cell_access" @click="selTags">
             <div class="weui-cell__hd">兴趣爱好</div>
             <div class="weui-cell__bd" >
                 <span v-for="(item,idx) in selArray" :key="idx">{{item.tag_name}}</span>
             </div>
             <view class='weui-cell__ft weui-cell__ft_in-access'> <span v-if="selArray.length==0">请选择兴趣爱好</span>  </view>
         </div>
     </div>
     <div class="btn" @click="save">确定</div>

     <van-popup
        :show="levshow"
        position="bottom"
        >
        <van-picker  @change="change" show-toolbar title="请选择年级" :columns="lev" @cancel="onCancel" @confirm="onConfirm" >
        </van-picker>
     </van-popup>
     <van-popup
        :show="ageshow"
        position="bottom"
        >
        <van-picker  @change="change" show-toolbar title="请选择年龄" :columns="age" @cancel="ageCancel" @confirm="ageConfirm" />
     </van-popup>
</div>
</template>

<script>
import classTit from "@/components/classTit";
import {sendbag} from "@/api/redbag"  
import {redbagBonus} from "@/api/redbag" 
import {pay} from "@/utils/pay" 
import URL from '@/utils/host'
export default {
    components:{
      classTit
    },
    data() {
        return {
           items: [
            {name: '1', value: '一公里' ,checked: 'true'},
            {name: '2', value: '三公里'},
            {name: '3', value: '五公里'},
            {name: '4', value: '全市'},
          ],
          xingbie:[
              {name: '1', value: '男' ,checked: 'true'},
              {name: '2', value: '女'}
          ],
          distance:'1',
          sexNum:'1',
          lev: [],
          levshow:false,
          ageshow:false,
          ageSed:"",
          levsed:"",
          upimgs:[],
          mobileLocation:{},
          cate:{},
          ab_images:"",
          age:[],
          grade:[],
          selArray:[],
          ylink: URL.host3,
          resbag_type:'1',
          hongbTYpe:[
              {name: '1', value: '随机' ,checked: 'true'},
              {name: '2', value: '平均'}
          ],
        }
    },
    methods: {
        onChange: function(e) {
            this.distance=e.mp.detail
        },
        selgraden:function(e){
            console.log(e)
            this.sexNum=e.mp.detail
        },
        seltype(e){
            this.resbag_type=e.mp.detail
        },
        selLev:function(){
            this.levshow=true
        },
        selAge:function(){
           this.ageshow=true
        },
        onConfirm(e) {
            console.log(e)
            this.levshow = false
            let index=e.target.index;
            this.levsed=e.target.value;
            this.cate.grades=this.grade[index].id
        },
        onCancel(e) {
            console.log(e)
            this.levshow = false
        },
        ageConfirm(e){
            console.log(e)
            this.ageshow = false
            this.ageSed=e.target.value
        },
        ageCancel(e){
            console.log(e)
            this.ageshow = false
        },
        chooseImage: function () {
            var that=this;
                wx.chooseImage({
                count:1, // 最多可以选择的图片张数，默认9
                sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
                sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
                success: function (res) {
                       
                     wx.uploadFile({
                        url: URL.host2 + 'file/upload',
                        filePath: res.tempFilePaths[0],
                        name: 'file',
                        formData: {
                            type: 1,
                        },
                        header: {
                            'Authorization': wx.getStorageSync('token'),
                            "Content-Type": "multipart/form-data"
                        },
                        success: (res) => {
                              console.log(res)
                              let img = JSON.parse(res.data).data
                              that.upimgs.push(img)  
                        }
                    })
                },
                fail: function () {
                    // fail
                },
                complete: function () {
                    // complete
                }
            })
        },
        delImg:function(index){
            this.upimgs.splice(index, 1)
        },
        openMap(){
            console.log(1)
            var that=this;
            wx.chooseLocation({
                success: function (res) {
                    console.log(res)
                    let mobileLocation = {
                        lng: res.longitude,
                        lat: res.latitude,
                        address: res.address,
                        name: res.name,
                    };
                    that.mobileLocation=mobileLocation
                },
                fail: function (err) {
                    console.log(err)
                }
            });
        },
        uploadAds(){
             var that=this;
             wx.chooseImage({
                count:1, // 最多可以选择的图片张数，默认9
                sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
                sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
                success: function (res) {
                    // console.log(res)
                    wx.uploadFile({
                        url: URL.host2 + 'file/upload',
                        filePath: res.tempFilePaths[0],
                        name: 'file',
                        formData: {
                            type: 1,
                        },
                        header: {
                            'Authorization': wx.getStorageSync('token'),
                            "Content-Type": "multipart/form-data"
                        },
                        success: (res) => {
                              console.log(res)
                              let img = JSON.parse(res.data).data
                              that.ab_images=img 
                        }
                    })
                },
                fail: function () {
                    // fail
                },
                complete: function () {
                    // complete
                }
            })
        },
        save(){
            console.log(this.cate)
            if(this.cate.desc==undefined||this.cate.desc.length==0){
                wx.showToast({
                    title: '请填写内容',
                    icon: 'none',
                }); 
            }else if(this.upimgs.length==0){
                wx.showToast({
                    title: '请选择图片',
                    icon: 'none',
                }); 
            }else if(this.cate.money==undefined||this.cate.money.length==0){
                wx.showToast({
                    title: '请输入红包金额',
                    icon: 'none',
                }); 
            }else if(this.cate.nums==undefined||this.cate.nums.length==0){
                wx.showToast({
                    title: '请输入红包个数',
                    icon: 'none',
                }); 
            }else if(this.mobileLocation.address==undefined){
                wx.showToast({
                    title: '请选择位置',
                    icon: 'none',
                }); 
            }else if(this.ab_images==" "){
                wx.showToast({
                    title: '请选择封面图',
                    icon: 'none',
                }); 
            }else{
                this.cate.radius=this.distance  //半径
                this.cate.position=this.mobileLocation //经度
                this.cate.thumb=this.upimgs    //图片
                this.cate.payment=1            //支付方式
                this.cate.gender=this.sexNum   //性别
                this.cate.interests=this.selArray         //兴趣爱好
                this.cate.ad_img =this.ab_images; //封面图
                this.cate.ages =this.ageSed;   //年龄
                this.cate.redbag_type=this.resbag_type
                sendbag(this.cate).then(res=>{
                    if(res.code==200){
                        pay(res.data).then(res=>{
                            wx.navigateBack({
                                delta: 1
                            });
                        })
                    }
                })
            }
        },
        selTags(){
            mpvue.navigateTo({
                url: '/pages/tags/main?type=2',
                success: (result) => {
                    
                },
            });
              
        }
    },
    onLoad() {
        Object.assign(this.$data, this.$options.data())
        redbagBonus().then(res=>{
            if(res.code==200){
                this.age=res.data.age,
                this.grade=res.data.grade
                console.log(res.data.grade)
                for(var i in res.data.grade){
                    this.lev.push(res.data.grade[i].name)
                }
            }
        })
    },
    onShow(){
        wx.getStorageSync("selArray")?this.selArray=wx.getStorageSync("selArray"):''
    },
     onUnload(){
        wx.setStorage({
            key: 'selArray',
            data: 0,
            success: (result) => {
                
            },
            fail: () => {},
            complete: () => {}
        });
    }
}
</script>

<style lang="scss">
page{
    background: #F4F5F5;
}

.sendred{
    .weui-cell{
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:1;
        .weui-cell__hd{
            margin-right: 37px;
        }
        .weui-cell__ft{
            color:rgba(51,51,51,1);
        }
    }
    
    ._van-radio-group{
        width: 100%;
        text-align:center;
    }
    .tuoyuan{
        width: 375px;
        height: 118px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .sendredCard{
        width:345px;
        min-height:215px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius:5px;
        margin: auto;
        margin-top: 16px;
        position: relative;
        padding-top: 12px;
        .classTit{
           padding-left: 0;
           margin-top: 0;
        }
        textarea{
            padding:10px 25px;
            box-sizing: border-box;
            min-height: 140px;
            font-size: 14px;
            color: #333;
            line-height: 21px;
        }
        .images{
            padding:0 20px;
            .imageItem{
                width:70px;
                height:70px;
                background:rgba(239,239,239,1);
                display: inline-block;
                position: relative;
                margin-right: 10px;
                .thumb{
                    width:70px;
                    height:70px;
                    display: block;
                    }
                    .close{
                    width:18px;
                    height:18px;
                    position: absolute;
                    top:-9px;
                    right:-9px;
                    display: block;

                }
            }
        }
        .answeroperate{
            padding-top:0;
            padding-bottom:15px;
            font-size:24rpx;
            font-weight:500;
            color:rgba(102,102,102,1);
            img{
            width:28px;
            height:28px;
            margin-left:20px;
            }
        }
    }
    .adsCard{
        width:345px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius:5px;
        margin: auto;
        margin-top: 16px;
        padding-top: 15px;
        padding-bottom: 15px;
        .ads{
            width:240px;
            height:80px;
            background:rgba(255,255,255,1);
            border:1px solid rgba(221,221,221,1);
            border-radius:5px;
        }
    }
    .selCard{
        width:345px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius:5px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin:15px auto;
        .classTit{
           padding-left: 0;
           margin-top: 0;
        }
    }
    .btn{
        width:345px;
        height:45px;
        background:#2485FC;
        border-radius:5px;
        margin:15px auto;
        text-align: center;
        line-height: 45px;
        font-size:15px;
        font-weight:bold;
        color:rgba(255,255,255,1);
    }
}
</style>
